<script lang="tsx">
/**
 * 图片
 */
export default {
  name: "image-form"
}
</script>

<script lang="tsx" setup>
import {ref, watch} from "vue"
import {uploadUrl} from "@/frame/config/upload.ts"

/**
 * 定义props
 */
const props = defineProps<{
  src: string,
  width?: number,
  height?: number
}>()

/**
 * 图片实例
 */
const imageRef = ref<any>()

/**
 * 图片数据
 */
const imageData = ref()

/**
 * 预览
 */
const handleClick = () => {
  imageRef.value.showPreview()
}

/**
 * 监听
 */
watch(() => props, (newValue: any) => {
  if (newValue) {
    imageData.value = {
      ...newValue,
      src: "http://111.229.5.45:16000/" + newValue.src
    }
    console.log(imageData.value)
  }
}, {
  deep: true,
  immediate: true
})
</script>

<template>
  <el-image ref="imageRef" :src="imageData.src" :style="{
              width: `${width}px`,
              height: `${height}px`
            }"
            @click="handleClick"/>
</template>

<style lang="scss" scoped>

</style>